<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    .box1{
      width: 500px;
      height: 200px;
      /* 
          引入背景图片，支持本地、远程、base64
              背景图片默认会重复
      */
      background-image: url(./img/1\ \(1\).jpg);
      background-repeat: repeat;/* 默认重复 */
      /* 去除重复 */
      background-repeat: no-repeat;
      /* 
        背景尺寸：
            宽度、高度支持px和%百分比
            background-size: (宽度 高度)或者模式;
                      模式: cover(封面模式) 特点: 填满容器，可能会裁切图片
                            contain(包含模式) 特点:等比例适配显示图片，可能会漏出底色
      */
      background-size: 100% 100%;
      background-size: cover;
      background-size: contain;
      background-color: #ccc;

    }
  </style>
  <div class="box1"></div>

  <style>
    .box2{
      width: 1100px;
      /* 将块级水平居中 */
      margin: 0 auto;
    }
    .box2 > div{
      height: 800px;
      background-repeat: no-repeat;
      /* 
        背景附件
        background-attachment: 
                            scroll
                            默认scroll表示背景跟随页面滚动 
                            fixed 
                            会将背景固定在页面某个位置，当该元素出现时，背景才会显示出来

      */
      background-attachment: scroll;
      background-attachment: fixed;
    }
    .box2 > .img1{
      background-image: url(./img/1\ \(1\).jpg);
    }
    .box2 > .img2{
      background-image: url(./img/1\ \(2\).jpg);
    }
    .box2 > .img3{
      background-image: url(./img/1\ \(3\).jpg);
    }
  </style>
  <div class="box2">
    <div class="img1"></div>
    <div class="img2"></div>
    <div class="img3"></div>
  </div>



  <style>
    /* 
        背景定位位置   
          作用：决定从什么盒子位置显示背景，默认从填充盒子(padding-box)显示背景
          background-origin:  
    */
    .origin{
      width: 200px;
      height: 200px;
      background-image: url(./img/1\ \(1\).jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-color: #ccc;
      padding: 20px;
      /* 边框色为透明 */
      border: 10px solid transparent;
      background-origin: content-box; /* 从内容部分显示背景 */
      background-origin: border-box; /* 从边框部分显示背景 */
      background-origin: padding-box;/* 从填充部分显示背景 */
      margin-bottom: 30px;
    }
  </style>
  <div class="origin"></div>

  <style>
    /* 
      背景裁切， 作用：决定从什么盒子位置裁切背景图片
      background-clip: 
                      border-box (从边框位置裁切，默认)
                      padding-box (从填充盒子裁切)
                      content-box (从内容盒子裁切)
    */
    .clip{
      width: 200px;
      height: 200px;
      background-image: url(./img/1\ \(1\).jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-color: #ccc;
      padding: 20px;

      border: 10px solid transparent;
      background-clip: padding-box;
      background-clip: content-box;
      /* background-clip: border-box; */
    }
  </style>
  <div class="clip"></div>
</body>
</html>